<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>评价</title>
  <link rel="stylesheet" href="../js/bootstrap-3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="../css/edit_personage.css">
</head>
<body>
<header class="header">
  <div class="logo-box"><img src="../images/logo.png" alt=""></div>
  <ul class="nav">
    <li>手机端</li>
    <li>发布房源</li>
    <li>故事</li>
    <li>消息</li>
    <li>帮助</li>
    <li onclick="personageFn()"><img class="img-circle" src="https://z1.muscache.cn/im/pictures/user/0eecd210-2706-4f2e-9785-c13cf77594b9.jpg?aki_policy=profile_small" style="width: 28px;height: 28px;"  alt=""></li>
    <!--<li>注册</li>
    <li>登录</li>-->
  </ul>
</header>
<div class="personBox">
  <div class="personageBox">
    <ul>
      <li><a href="./edit_personage.html">编辑个人资料</a></li>
    </ul>
  </div>
</div>
<div class="container-fluid max-w1080" style="margin-top: 24px;">
  <div class="row">
    <div class="col-xs-3 leftContent">
      <ul>
        <li><a href="edit_personage.html">编辑个人资料</a></li>
        <li><a href="edit_portrait.html">照片</a></li>
        <li><a href="edit_verification.html">信任和验证</a></li>
        <li><a href="edit_evaluate.html" class="active">评价</a></li>
      </ul>
      <a href="personage.html" class="lookOver">查看个人资料</a>
    </div>
    <div class="col-xs-9 rightContent">
      <ul class="tabs" role="tablist">
        <li>
          <span class="tab-item" role="tab" aria-controls="received" aria-selected="true">
            对您的评价
          </span>
        </li>
        <li>
          <span href="javascript:void(0)" class="tab-item" role="tab" aria-controls="sent" aria-selected="false">
            您写的评价
          </span>
        </li>
      </ul>
      <div class="evaluateBox">
        <div class="toYou_evaluate" style="display: block;">
          <div class="panel" style="margin-top: 24px;">
            <div class="panel-header">过往的评价</div>
            <div class="panel-body">
              <p class="text-lead">
                预订的住宿结束后才能在爱彼迎网站上撰写评价。您收到的评价将出现在这里以及您公开的个人资料中。
              </p>
              <ul class="list-layout reviews-list space-top-4">
                <li class="reviews-list-item">
                  尚未有人对您进行评价。
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="you_evaluate">
          <div class="panel" style="margin-top: 24px;">
            <div class="panel-header">撰写评论</div>
            <div class="panel-body">
              <p class="text-lead">
                目前没有写评价的需要。该是预订另一个旅程的时候了！
              </p>
            </div>
          </div>
          <div class="panel" style="margin-top: 24px;">
            <div class="panel-header">您过往写的评价</div>
            <div class="panel-body">

            </div>
          </div>

        </div>

      </div>

    </div>
  </div>
</div>

<footer class="footer">
  <div class="_2h22gn">
    <div class="footer-box">
      <section class="list">
        <div class="list-con">
          <h4 class="f-tit">爱彼迎</h4>
          <ul>
            <li><a href="#">工作机会</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">政策</a></li>
            <li><a href="#">政策</a></li>
            <li><a href="#">政策</a></li>
          </ul>
        </div>
      </section>
      <section class="list">
        <div class="list-con">
          <h4 class="f-tit">爱彼迎</h4>
          <ul>
            <li><a href="#">工作机会</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">政策</a></li>
            <li><a href="#">政策</a></li>
            <li><a href="#">政策</a></li>
          </ul>
        </div>
      </section>
      <section class="list">
        <div class="list-con">
          <h4 class="f-tit">爱彼迎</h4>
          <ul>
            <li><a href="#">工作机会</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">政策</a></li>
            <li><a href="#">政策</a></li>
            <li><a href="#">政策</a></li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</footer>
</body>
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script>
  function personageFn(){
    $(".personBox").fadeToggle(10);
  }
  $(function(){
    $(".tabs>li").click(function(){
      var idx = $(".tabs>li").index(this);
      $(this).find(".tab-item").attr("aria-selected","true").parent().siblings().find(".tab-item").attr("aria-selected","false");
      $(".evaluateBox>div").eq(idx).show().siblings().hide();

    });
  })
</script>
</html>
